<template>
  <div>
    <div class="al-box-container">
      <div class="al-title-h2">测试多文件上传</div>

      <div style="width: 600px"
           class="al-box-pretty">
        <div class="al-box-container">
          <div>
            <el-upload
                    action="#"
                    list-type="picture-card"
                    multiple
                    ref="upload"
                    :on-change="handleChange"
                    :before-upload="handleBeforeUpload"
                    :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </div>
          <div class="al-m-top-20px">
            <el-button round type="primary" plain @click="uploadButton">上传</el-button>
          </div>

          result
          <div class="al-bg-color-light-blue al-width-90 al-p-20px al-m-20px">
            {{result}}
          </div>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
  import {request} from '../../util/network/request';

  export default {
    name: "Test",
    components: {},
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        result:[],
        list:[],
        formDataList:[],
        uploadUrl1: 'http://localhost:9999/upload/image/return-id',
        uploadUrl2: 'http://localhost:9999/upload/image/multi'
      }
    },

    methods: {
      goPage(path){
        this.gotoPage(path);
      },

      //上传按钮
      uploadButton(){
        //将FormData组装成数组
        this.getFormDataList();

        //开始上传
        this.sendRequest(this.formDataList, 0);

      },

      //将FormData组装成数组
      getFormDataList(){
        for (let file of this.list) {
          let formData = new FormData();
          formData.append("file", file);
          formData.append("uid", 1);
          formData.append("isAlbum", 0);
          console.log(file);
          this.formDataList.push(formData);
        }
      },

      //发起上传的请求
      sendRequest(formDataList, index){
        request({
          url: this.uploadUrl1,
          method: 'post',
          data: formDataList[index],
          headers:{
            "content-type" : "multipart/form-data"
          }
        }).then(res => {
          console.log(res.data);
          this.result.push(res.data);
          console.log(this.result.join(";").toString());

          //递归上传下一张图片
          index++;
          if (index < formDataList.length){
            this.sendRequest(formDataList, index);
          }

          //上传完最后一张之后的操作
          if (index == formDataList.length){
            this.$message.success("上传完成");
          }
        }).catch(err => {
          console.log(err)
        })
      },


      handleBeforeUpload(file, fileList){
        // this.myFileList = fileList;
      },

      handleRemove(file) {
        // console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        // console.log(file);
      },

      //文件改变时，获取到文件的file.raw
      handleChange(file, fileList){
        this.list.push(file.raw);
        console.log(this.list);
      }


    }
  }
</script>

<style scoped>
  .is-selected {
    color: #00ffae;
  }

  .is-selected-past {
    color: #C0C4CC;
  }

  /*.test {*/
  /*  margin: 0;*/
  /*  width: 100%;*/
  /*  height: 100vh;*/
  /*  font-family: "Exo", sans-serif;*/
  /*  color: #fff;*/
  /*  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
  /*  background-size: 400% 400%;*/
  /*  animation: gradientBG 15s ease infinite;*/
  /*}*/


  /*@keyframes gradientBG {*/
  /*  0% {*/
  /*    background-position: 0% 50%;*/
  /*  }*/
  /*  50% {*/
  /*    background-position: 100% 50%;*/
  /*  }*/
  /*  100% {*/
  /*    background-position: 0% 50%;*/
  /*  }*/
  /*}*/


  .test {
    margin: 0;
    width: 100%;
    height: 100vh;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #FFFEFF, #D7FFFE, #d1d1d1, #e7f0fd);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }


  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

</style>
